/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-07-17 17:26:32
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-07-23 18:35:44
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\components\canvasTable.tsx
 * @Description: 表格组件
 * 该组件用于渲染一个基于canvas的表格。它通过利用canvas的绘图能力来实现表格的展示，
 * 相比于传统的DOM渲染，canvas渲染可以提供更好的性能，特别是在大数据量的表格渲染中。
 * 
 * @param props 组件的属性
 * @param props.data 表格的数据源，是一个数组，每个元素代表一行数据
 * @param props.columns 表格的列定义，是一个数组，每个元素代表一列的配置，包括标题和数据映射字段等
 */
import React, { useEffect, useRef } from 'react'

export default function canvasTable(props: { data: any[], columns?: any[] }) {

    const canvasRef = useRef<HTMLCanvasElement>(null)
    const canvasStyle = {
        width: '400px',
        height: '330px'
    }

    // 在组件挂载时初始化canvas元素并绘图
    useEffect(() => {
        // const canvas = document.getElementById('canvas') as HTMLCanvasElement 此种方案必须在retrun中id=canvans
        const canvas = canvasRef.current as HTMLCanvasElement
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D

        const rowHight = 20
        const colWidths = [50, 150, 50]

        canvas.width = colWidths.reduce((a, b) => a + b, 0)
        canvas.height = props.data.length * rowHight

        const drawTable = () => {
            // 清空画布
            // ctx.clearRect(0, 0, canvas.width, canvas.height)
            props.data.forEach((row, rowIndex) => {
                const y = rowIndex * rowHight
                ctx.fillText(row.id, 0, y + rowHight / 2)
                ctx.fillText(row.name, colWidths[0], y + rowHight / 2)
                ctx.fillText(row.age, colWidths[0] + colWidths[1], y + rowHight / 2)
                ctx.strokeRect(0, y, canvas.width, rowHight)
            })
        }

        // 此处必须第一次进行渲染，否则无法看见数据
        drawTable()

        return () => {
            // 数据变化后，进行重新绘制
            drawTable()
        }
    }, [props.data])

    return <canvas ref={canvasRef}></canvas>
}
